import React, {Component} from 'react';
import {FlatList, StyleSheet, Text, View, Image, 
  TouchableOpacity,
} from 'react-native';
import {BASEURL} from '../../api/api';
import BackButton from '../../component/BackButton';
import { TipModal } from '../../component/Tips';
import NoData from '../../component/NoData';
import {jumpPage} from '../../common/common'
import {width} from '../../common/common'
var IMG_URL =  BASEURL+'image/showImage?imageName=';
export default class TypeList extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title: navigation.getParam('typeName'),
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      data:[],
    })
  }
  componentDidMount(){
    this._getDataList(this.props.navigation.getParam('typeId'));
  }
  _getDataList(typeId){
    this.refs.tipModal._loading();
    fetch(BASEURL+'temp/list?typeId='+typeId)
    .then(res=>res.json())
    .then(response=>{
      this.refs.tipModal._close();
      //console.log(response);
      this.setState({
        data:response.list,
      })
    })
  }
  _goDetail(tempId,tempTitle){
    jumpPage(this.props.navigation,'tempDetail',{tempId,tempTitle})
  }
  _renderList(){
    let {data} = this.state;
    var array = [];
    for(let i=0; i<data.length; i++){
      let item = data[i];
      array.push(
        <Cell  key={i}   style={{marginLeft:i%2==0 ? 0 : 0}}
        press={()=>this._goDetail(item.tempId,item.tempTitle)} data={item} />
      )
    }
    return array;
  }
  render(){
    return(
      <View style={styles.container}>
        { this.state.data.length==0 ? <NoData/> :
          <View style={styles.contentView}>
          { this._renderList()}
        </View>
        }
        
        <TipModal ref="tipModal"/>
      </View>
    )
  }
}
class Cell extends Component{
  render(){
    let img = this.props.data.tempImg;
    if(img.indexOf('http') == -1){
      img = IMG_URL + img;
    }
    return(
      <TouchableOpacity style={[styles.cellViewStyle,this.props.style]} activeOpacity={0.6} onPress={this.props.press}>
        <Image style={styles.cellImg} source={{uri:img}}/>
        <View style={styles.textView}>
          <Text style={styles.cellText}>{this.props.data.tempTitle}</Text>
        </View>
        
      </TouchableOpacity>
    )
  }
}
const styles = StyleSheet.create({
  cellViewStyle:{
		padding:5,
    marginBottom:6,
    marginLeft:0,
    width:width/2-5,
    backgroundColor:'#fff',
    paddingBottom:3,
    shadowColor: 'rgba(0, 0, 0, 0.8)',
    shadowOffset: {
        width: 10,
        height: 3
    },
    shadowRadius: 2,
    elevation: 4,
  },
  textView:{
    //borderWidth:StyleSheet.hairlineWidth,
    //borderColor:'orange',
  },
  cellText:{
    padding:0,
    paddingLeft:0,
  },
  cellImg:{
		width:(width-10)/2-10,
    height:((width-10)/2-10)/16*9,
  },
  contentView:{
    flexDirection:'row',
    justifyContent:'space-between',
    flexWrap:'wrap',
    // borderColor:'red',
    // borderWidth:StyleSheet.hairlineWidth
  },
  container: {
    backgroundColor:'#f0f0f0',
    paddingTop:10,
    flex: 1,
  },
})